---
title: Εικονίδια
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

Μια λίστα με εικονίδια που χρησιμοποιούνται σε όλη την εφαρμογή μας.

## Tabler Icons

Χρησιμοποιούμε εικονίδια Ταμπλέρος για το React σε όλη την εφαρμογή.

<Tabs>

<Tab title="Installation"><br/>

```
yarn add @tabler/icons-react
```

</Tab>

<Tab title="Props">

Μπορείτε να εισάγετε κάθε εικονίδιο ως ένα συστατικό. Here's an example: <br />

```jsx
import { IconArrowLeft } from "@tabler/icons-react";

export const MyComponent = () => {
  return <IconArrowLeft color="red" size={48} />;
};
```

</Tab>

<Tab title="Props">

| Ιδιότητες | Τύπος         | Περιγραφή                                           | Προεπιλογή   |
| --------- | ------------- | --------------------------------------------------- | ------------ |
| μέγεθος   | αριθμός       | Το ύψος και πλάτος του εικονιδίου σε εικονοστοιχεία | 24           |
| χρώμα     | αλφαριθμητικό | Το χρώμα των εικονιδίων                             | currentColor |
| stroke    | αριθμός       | The stroke width of the icon in pixels              | 2            |

</Tab>

</Tabs>

## Προσαρμοσμένα Εικονίδια

Εκτός από τα εικονίδια Ταμπλέρος, η εφαρμογή χρησιμοποιεί επίσης και κάποια προσαρμοσμένα εικονίδια.

### Εικονίδιο Βιβλίο Διευθύνσεων

Εμφανίζει ένα εικονίδιο βιβλίου διευθύνσεων.

<Tabs>

<Tab title="Usage">

```jsx
import { IconAddressBook } from 'twenty-ui/display';

export const MyComponent = () => {
  return <IconAddressBook size={24} stroke={2} />;
};
```

</Tab>

<Tab title="Props">

| Ιδιότητες | Τύπος   | Περιγραφή                                           | Προεπιλογή |
| --------- | ------- | --------------------------------------------------- | ---------- |
| μέγεθος   | αριθμός | Το ύψος και πλάτος του εικονιδίου σε εικονοστοιχεία | 24         |
| stroke    | αριθμός | The stroke width of the icon in pixels              | 2          |

</Tab>

</Tabs>
